<%--
  Created by IntelliJ IDEA.
  User: lyy
  Date: 2022/9/29
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>

<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">

    <title>职位详情</title>
</head>
<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<jsp:include page="/web/personal/inc/indexHead"/>

<section>
    <div class="pxp-container">
        <div class="pxp-single-job-content">
            <div class="row justify-content-center">
                <div class="col-xl-9">
                    <div class="pxp-single-job-cover pxp-cover pxp-bigger-margin" style="background-image: url(/static/images/city-7.jpg);"></div>
                    <div class="pxp-single-job-cover-logo pxp-is-center" style="background-image: url(/static/images/${position.company.face});"></div>

                    <div class="text-center mt-3 mt-lg-4">
                        <h1>${position.positionName}</h1>
                        <div class="pxp-single-job-company-location">
                            发布: <a href="/web/personal/personalCompanyDetail/${position.company.id}" class="pxp-single-job-company"> &nbsp;${position.company.name}</a>
<%--                            <a href="jobs-list-1.html" class="pxp-single-job-location">Paris, France</a>--%>
                        </div>

                        <div class="pxp-single-job-options pxp-is-center mt-3 mt-lg-4">
                            <c:if test="${concernFlag}" var="concernFlag">
                                <button class="btn pxp-single-job-save-btn collection" style="background-color: #0c63e4;"><span class="fa fa-heart-o"></span></button>
                            </c:if>
                            <c:if test="${not concernFlag}">
                                <button class="btn pxp-single-job-save-btn collection"><span class="fa fa-heart-o"></span></button>
                            </c:if>
                            <div class="dropdown ms-2">
                                <button class="btn pxp-single-job-share-btn dropdown-toggle" type="button" id="socialShareBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="fa fa-share-alt"></span></button>
                            </div>
                            <c:if test="${applicationFlag}" var="appFlag">
                                <button class="btn ms-2 pxp-single-job-apply-btn rounded-pill" disabled>已申请</button>
                            </c:if>
                            <c:if test="${not appFlag}">
                                <button class="btn ms-2 pxp-single-job-apply-btn rounded-pill application">立即申请</button>
                            </c:if>
                        </div>

                        <div class="row mt-3 mt-lg-4 justify-content-center align-items-center pxp-is-center">
                            <div class="col-auto">
                                <a href="jobs-list-1.html" class="pxp-single-job-category">
                                    <div class="pxp-single-job-category-icon"><span class="fa fa-comments-o"></span></div>
                                    <div class="pxp-single-job-category-label">在线客服</div>
                                </a>
                            </div>
                            <div class="col-auto">
                                <div class="pxp-single-job-date pxp-text-light">发布时间：<fmt:formatDate value="${position.enrollTime}" pattern="yyyy-MM-dd"/></div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-100">
                        <div class="col-lg-7 col-xxl-8">
                            <div class="pxp-single-job-content-details">
                                <h3>职位类型</h3><br>
                                <ul style="padding-left: 0px; font-size: 20px;">${position.positionTypeSecond.positionType.typeName}--${position.positionTypeSecond.typeName}</ul>
                                <hr>
                                <h3>职位标签</h3><br>
                                <c:if test="${empty requestScope.position.introductionTabs}">
                                    <span style="color: #0a53be; font-size: 20px;">暂无</span> &nbsp;&nbsp;&nbsp;
                                </c:if>
                                <c:if test="${not empty requestScope.position.introductionTabs}">
                                    <c:forEach items="${requestScope.position.introductionTabs}" var="introductionTab">
                                        <span style="color: #0a53be; font-size: 20px;">${introductionTab.introductionTabInfo}</span> &nbsp;&nbsp;&nbsp;
                                    </c:forEach>
                                </c:if>
                                <hr>
                                <div class="mt-4" style="font-size: 16px;">
                                    <h3>工作描述</h3><br>
                                    <ul style="padding-left: 0px;">${position.introduction}</ul>
                                </div>
                                <hr>
<%--                                <div class="mt-4" style="font-size: 16px;">--%>
<%--                                    <h3>职位要求</h3><br>--%>
<%--                                    <c:if test="${empty position.majorLimit}">--%>
<%--                                        <ul style="padding-left: 0px;">专业要求: 暂无</ul>--%>
<%--                                    </c:if>--%>
<%--                                    <c:if test="${not empty position.majorLimit}">--%>
<%--                                        <ul style="padding-left: 0px;">专业要求: ${position.majorLimit}</ul>--%>
<%--                                    </c:if>--%>
<%--                                    <c:if test="${empty position.requirements}">--%>
<%--                                        <ul style="padding-left: 0px;">其他要求: 暂无</ul>--%>
<%--                                    </c:if>--%>
<%--                                    <c:if test="${not empty position.requirements}">--%>
<%--                                        <ul style="padding-left: 0px;">其他要求: ${position.requirements}</ul>--%>
<%--                                    </c:if>--%>
<%--                                </div>--%>
<%--                                <hr>--%>
                                <div class="mt-4">
                                    <h3>职位福利</h3><br>
                                    <c:if test="${empty requestScope.position.welfares}">
                                        <span style="color: #0a53be; font-size: 20px;">面议</span> &nbsp;&nbsp;&nbsp;
                                    </c:if>
                                    <c:if test="${not empty requestScope.position.welfares}">
                                        <c:forEach items="${requestScope.position.welfares}" var="welfare">
                                            <span style="color: #0a53be; font-size: 20px;">${welfare.welfareTab}</span> &nbsp;&nbsp;&nbsp;
                                        </c:forEach>
                                    </c:if>
                                </div>
                                <div class="mt-4 mt-lg-5">
                                    <a href="javascript:void(0);" class="btn rounded-pill pxp-section-cta application">立即申请</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-xxl-4">
                            <div class="pxp-single-job-side-panel mt-5 mt-lg-0">
                                <div>
                                    <div class="pxp-single-job-side-info-label pxp-text-light">工作地点</div>
                                    <div class="pxp-single-job-side-info-data">${position.province.provName}-${position.city.cityName}-${position.district.districtName}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">工作经验</div>
                                    <div class="pxp-single-job-side-info-data">${position.workExperienceType.workExperienceInfo}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">学历要求</div>
                                    <div class="pxp-single-job-side-info-data">${position.education.educationName}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">就业类型</div>
                                    <c:if test="${position.fullTimeOn}" var="fullTime">
                                        <div class="pxp-single-job-side-info-data">全职</div>
                                    </c:if>
                                    <c:if test="${not fullTime}">
                                        <div class="pxp-single-job-side-info-data">兼职</div>
                                    </c:if>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">工作薪资</div>
                                    <div class="pxp-single-job-side-info-data">${position.salaryInfo}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">招聘人数</div>
                                    <div class="pxp-single-job-side-info-data">${position.count}</div>
                                </div>
                            </div>
                            <div class="mt-3 mt-lg-4 pxp-single-job-side-panel">
                                <div class="pxp-single-job-side-company">
                                    <div class="pxp-single-job-side-company-logo pxp-cover" style="background-image: url(/static/images/${position.company.face});"></div>
                                    <div class="pxp-single-job-side-company-profile">
                                        <div class="pxp-single-job-side-company-name">${position.company.name}</div>
                                        <a href="/web/personal/personalCompanyDetail/${position.companyId}">查看企业详细资料</a>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">公司规模</div>
                                    <div class="pxp-single-job-side-info-data">${position.company.companySize.companySizeInfo}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">成立时间</div>
                                    <div class="pxp-single-job-side-info-data"><fmt:formatDate value="${position.company.creationDate}" pattern="yyyy-MM-dd"/></div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">联系人</div>
                                    <div class="pxp-single-job-side-info-data">${position.company.contactPerson}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">联系电话</div>
                                    <div class="pxp-single-job-side-info-data">${position.company.phone}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">电子邮箱</div>
                                    <div class="pxp-single-job-side-info-data">${position.company.email}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-label pxp-text-light">公司地址</div>
                                    <div class="pxp-single-job-side-info-data">${position.company.address}</div>
                                </div>
                                <div class="mt-4">
                                    <div class="pxp-single-job-side-info-data">
                                        <ul class="list-unstyled pxp-single-job-side-info-social">
                                            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                                            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                                            <li><a href="#"><span class="fa fa-instagram"></span></a></li>
                                            <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-100">
                        <h2 class="pxp-subsection-h2">相关职位</h2>
                        <p class="pxp-text-light">您可能感兴趣的其他类似工作</p>

                        <div class="row mt-3 mt-md-4 pxp-animate-in pxp-animate-in-top pxp-in">
                            <c:forEach items="${requestScope.positions}" var="position">
                                <div class="col-xl-6 pxp-jobs-card-2-container">
                                    <div class="pxp-jobs-card-2 pxp-has-border">
                                        <div class="pxp-jobs-card-2-top">
                                            <a href="/web/personal/positionDetail/${position.id}" class="pxp-jobs-card-2-company-logo" style="background-image: url(/static/images/${position.company.face});"></a>
                                            <div class="pxp-jobs-card-2-info">
                                                <a href="/web/personal/positionDetail/${position.id}" class="pxp-jobs-card-2-title">${position.positionName}</a>
                                                <div class="pxp-jobs-card-2-details">
                                                    <a href="/web/personal/positionList?cityName=${position.city.cityName}" class="pxp-jobs-card-2-location">
                                                        <span class="fa fa-globe"></span>${position.province.provName}-${position.city.cityName}
                                                    </a>
                                                    <c:if test="${position.fullTimeOn}" var="fullTime">
                                                        <div class="pxp-jobs-card-2-type">全职</div>
                                                    </c:if>
                                                    <c:if test="${not fullTime}">
                                                        <div class="pxp-jobs-card-2-type">兼职</div>
                                                    </c:if>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pxp-jobs-card-2-bottom">
                                            <a href="/web/personal/positionList?positionTypeId=${position.positionTypeSecond.positionType.id}" class="pxp-jobs-card-2-category">
                                                <div class="pxp-jobs-card-2-category-label">${position.positionTypeSecond.positionType.typeName} & ${position.positionTypeSecond.typeName}</div>
                                                <div class="pxp-jobs-card-2-category-label" style="color: crimson;">${position.salaryInfo}</div>
                                            </a>
                                            <div class="pxp-jobs-card-2-bottom-right">
                                                <div class="pxp-jobs-card-2-date pxp-text-light">发布时间：<fmt:formatDate value="${position.enrollTime}" pattern="yyyy-MM-dd"/> </div>
                                                <a href="/web/personal/personalCompanyDetail/${position.company.id}" class="pxp-jobs-card-2-company">${position.company.name}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<jsp:include page="/web/personal/inc/indexFoot"/>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>

<script>
    $(function (){
        $(".application").click(application);

        $(".collection").click(collection);
    });

    // 申请工作
    function application() {

        if("${user}" == "")
        {
            alert("请先登录");
            location.href="/web/personal/login";
            return;
        }

        $.ajax({
            url:"/web/personal/applyPositionById",
            type:"post",
            async:false,
            data:{"positionId":${position.id}},
            success:function (mes) {
                if(mes=="true"){
                    alert("该职位您已申请!");
                }
                else{
                    alert("申请成功!");
                    $(".application").html("已申请");
                    $(".application").prop("disabled",true);
                }
            }
        });
    }

    // 收藏工作
    function collection() {

        if("${user}" == "")
        {
            alert("请先登录");
            location.href="/web/personal/login";
            return;
        }
        let concernFlag = $(this).css("background-color");
        let insertOrNot;
        if (concernFlag=="rgb(12, 99, 228)")
        {
            insertOrNot=true;
        }
        else
        {
            insertOrNot=false;
        }
        $.ajax({
            url:"/web/personal/collectPositionById",
            type:"post",
            async:false,
            data:{
                "positionId":"${position.id}",
                insertOrNot:insertOrNot
            },
            success:function (mes) {
                if(mes=="true"){
                    alert("取消关注成功!");
                    $(this).css("background-color","");
                }
                else{
                    alert("关注成功!");
                    $(this).css("background-color","#0c63e4");
                }
            }.bind(this)
        });
    }
</script>

</body>
</html>

